<template>
  <el-dialog
    title="部门树形图"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <div id="treeBox" class="treeBox"></div>
  </el-dialog>
</template>

<script>
import { treeDataTranslate } from "@/utils";
import * as echarts from "echarts";
export default {
  data() {
    return {
      dataArr: [],
      treeDate: [],
      visible: false,
      tree: null,
    };
  },
  mounted() {
    // this.initTree();
  },
  methods: {
    // 制作树形数据
    treeDataTranslateT(department_id) {
      const children = this.dataArr.filter(
        (item) => item.superior_department_id == department_id
      );

      return children.map((item) => ({
        ...item,
        name: item.department_name,
        children: this.treeDataTranslateT(item.department_id),
      }));
    },
    init(date) {
      //   this.treeDate = this.treeDataTranslateT(0);
      let p = new Promise((resolve, reject) => {
        this.dataArr = date;
        this.treeDate = this.treeDataTranslateT(0);
        resolve(this.dataArr);
      });
      p.then(() => {
        this.$nextTick(() => {
          this.initTree();
        });
      });
    },
    // 初始化树形图
    initTree() {
      this.visible = true;

      //   debugger;

      let option = {
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
        },
        series: [
          {
            type: "tree",

            data: [this.treeDate[0]],

            left: "2%",
            right: "2%",
            top: "8%",
            bottom: "20%",

            symbol: "emptyCircle",

            orient: "vertical",

            expandAndCollapse: true,

            label: {
              position: "top",
              rotate: -90,
              verticalAlign: "middle",
              align: "right",
              fontSize: 9,
            },

            leaves: {
              label: {
                position: "bottom",
                rotate: -90,
                verticalAlign: "middle",
                align: "left",
              },
            },

            animationDurationUpdate: 750,
          },
        ],
      };
      this.$nextTick(() => {
        this.tree = echarts.init(document.getElementById("treeBox"));
        this.tree.setOption(option);
      });
    },
  },
};
</script>

<style lang="scss">
.treeBox {
  width: 50vw;
  height: 30vw;
}
</style>
